<template>
  <div class="flex flex-col bg-yellow-1 flex-grow">
    <!-- hello tresjs -->
    <TresCanvas v-bind="gl">
      <TresPerspectiveCamera :position="[4, 3, 9]" />
      <OrbitControls />
      <Suspense>
        <Text3D
          :position="[0, 1, 0]"
          text="Click me"
          font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json"
        >
          <TresMeshNormalMaterial/>
        </Text3D>
      </Suspense>
      <TresDirectionalLight :position="[0,2,4]" :intensity="1.2" cast-shadow/>
      <TresGridHelper/>
    </TresCanvas>
  </div>
</template>
<script setup lang="ts">
import { OrbitControls, Text3D } from "@tresjs/cientos";
import { TresCanvas } from "@tresjs/core";
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";

const gl = {
  clearColor: "#82DBC5",
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
};
</script>
